Boolean Properties are a type of Figma Component Property that use True/False values to control the visibility of layers inside component instances. They are especially useful when a component contains optional elements such as icons, labels, badges, avatars, descriptions, buttons, or status indicators.
Boolean Properties make components more flexible and reusable because designers can turn specific layers on or off directly from the Properties section in the right sidebar instead of creating separate components for every possible combination.
JustAcademy Figma Training | Register for Figma Course Demo
A Boolean Property is a component property that uses two possible values: True and False. In Figma, Boolean Properties are primarily used to control layer visibility.
For example, a button component may contain both an icon and a text label. Instead of creating separate components for an icon button and a text button, Boolean Properties can control whether the icon or label is visible.
Boolean Property = A True/False component control used to show or hide a connected layer.
True → Layer Visible
False → Layer Hidden
Boolean Properties help designers build flexible components without creating a large number of similar variants. They provide clear on/off controls for optional elements and make components easier to reuse.
| Feature | Description |
|---|---|
| Property Type | Boolean |
| Values | True / False |
| Main Purpose | Control layer visibility |
| True | Shows the connected layer |
| False | Hides the connected layer |
| Used With | Components and component variants |
| Control Location | Properties section in the right sidebar |
| Common Uses | Icons, labels, badges, avatars, buttons, indicators |
Boolean Properties are based on a simple two-value logic system.
Property: Show Icon
TRUE
↓
Icon is visible
FALSE
↓
Icon is hidden
This makes Boolean Properties easy for designers and developers to understand because there are only two possible states.
When the Boolean Property is set to True, the associated layer is displayed in the component instance.
When the Boolean Property is set to False, the associated layer is hidden in the component instance.
Show Badge = True
→ Badge appears
Show Badge = False
→ Badge disappears
Boolean Properties are currently intended for layer visibility. They are not a general-purpose True/False control for every design attribute.
For example, a Boolean Property can control whether an icon layer is visible, but it is not directly intended as a general-purpose control for changing font size, color, padding, or corner radius.
Boolean Properties and Variants solve different design problems.
| Boolean Property | Variant |
|---|---|
| Controls an optional feature | Represents a component variation or state |
| Uses True/False | Uses variant property values |
| Commonly controls visibility | Can represent states, sizes, colors, and types |
| Good for optional icons | Good for Default, Hover, Pressed, Disabled |
| Reduces combinations of optional elements | Organizes related component versions |
Use Boolean Properties when a component contains an optional element that should simply be shown or hidden.
Use Variants when the component needs meaningful alternative states or configurations rather than simply showing or hiding a layer.
Imagine a button containing an icon and a text label.
Button
├── Icon
└── Label
Instead of creating two separate components, create Boolean Properties.
Show Icon = True
Show Label = True
The same component can then produce different configurations.
Show Icon = True
Show Label = True
→ Icon + Label
Show Icon = True
Show Label = False
→ Icon Only
Show Icon = False
Show Label = True
→ Label Only
To create a Boolean Property, first select a main component or suitable component variant and identify the nested layer whose visibility should be controlled.
Let's create a reusable button with an optional icon.
Button
├── Icon
└── Label
Show icon.True.The component now exposes a Boolean control for the icon.
The same technique can be used for a button label.
Show label.True.Button Properties
Show icon = True
Show label = True
After creating an instance of the component, the available Boolean Properties appear in the component Properties section of the right sidebar.
Designers can use these controls to change the component without manually selecting and hiding individual layers.
Main Component
↓
Create Instance
↓
Properties appear
↓
Toggle Boolean Property
↓
Layer shows or hides
A card may contain several optional elements.
Card
├── Image
├── Title
├── Description
├── Badge
└── Action Button
Boolean Properties can be applied to optional elements.
Show image
Show badge
Show description
Show action
This allows the same card component to be reused for multiple layouts.
A profile card may contain an avatar, job title, description, and action button.
Profile Card
├── Avatar
├── Name
├── Job Title
├── Description
└── Follow Button
Possible Boolean Properties:
Show avatarShow job titleShow descriptionShow actionA navigation item can contain an icon, label, and notification badge.
Navigation Item
├── Icon
├── Label
└── Badge
Boolean Properties can be used for:
Show icon
Show badge
This is useful when creating compact and expanded navigation systems.
A list item may contain leading and trailing elements.
List Item
├── Leading Element
├── Label
├── Metadata
└── Trailing Element
Boolean Properties can make the leading and trailing elements optional.
Has leading = True
Has trailing = False
Boolean Properties are especially valuable in design systems because they allow one reusable component to support multiple common configurations without creating unnecessary duplicate components.
For example, a design system may have one Button component with optional icon and label controls instead of separate components for every icon and label combination.
Without Boolean Properties, optional elements can create many combinations.
Button with Icon
Button without Icon
Button with Badge
Button without Badge
Button with Icon + Badge
Button without Icon + Badge
...
As the number of optional features increases, maintaining separate components becomes difficult. Boolean Properties can simplify these configurations.
If a component has several independent optional elements, Boolean Properties can provide a cleaner configuration model.
Show Icon
Show Badge
Show Description
Show Action
Each property can be independently turned on or off depending on the design requirement.
Good property names make components easier to understand.
Show iconShow labelShow badgeShow avatarShow descriptionHas leadingHas trailingOption 1Toggle AProperty 1Boolean 2A Boolean Property should communicate what will happen when the value changes.
Good:
Show icon
Show badge
Show metadata
Less clear:
Icon option
Badge setting
Mode 1
When creating a Boolean Property, choose the default value carefully. The default should normally represent the most common or recommended configuration of the component.
Show icon = True
Show label = True
For an optional secondary element, the default might be False.
Show badge = FalseBoolean Properties work particularly well with Auto Layout. When an optional layer is hidden, the surrounding Auto Layout structure can adjust based on the remaining visible content.
Button
[Icon] [Label]
Hide Icon
[Label]
This can help create flexible components without manually creating separate layouts for every configuration.
Icons are one of the most common uses of Boolean Properties.
Button
├── Icon
└── Text
Create:
Show icon = True / FalseThis allows the same button to work as an icon-and-text button or a text-only button.
Badges are often optional in cards, list items, navigation items, and notifications.
Show badge = True
→ Badge visible
Show badge = False
→ Badge hidden
A reusable user list component can include an optional avatar.
User Item
├── Avatar
├── Name
└── Status
Apply:
Show avatar = True / FalseThis allows the same component to support both avatar and non-avatar layouts.
Status indicators can also be optional.
User
├── Avatar
├── Name
└── Online Indicator
Property:
Show status = True / FalseCards and list items may need descriptions in some contexts but not others.
Card
├── Title
├── Description
└── Action
Use:
Show description = True / FalseA component may include an optional action button.
Card
├── Content
└── Action Button
Boolean Property:
Show action = True / FalseBoolean Properties can be applied to nested layers and instances inside a main component. This is useful for creating flexible composite components.
Card
├── Avatar Instance
├── Text Content
└── Action Instance
Optional nested elements can be controlled through suitable Boolean Properties.
| Manual Layer Hiding | Boolean Property |
|---|---|
| Requires selecting layers | Uses a clear property control |
| Less discoverable | Easy to find in Properties |
| Harder for component users | Designed for reusable components |
| Can create inconsistent usage | Provides a defined control |
Creating separate components for every optional configuration can make a design system unnecessarily large.
Instead of:
Button + Icon
Button - Icon
Button + Badge
Button - Badge
Use:
Button
├── Show icon
└── Show badge
| Boolean Property | Instance Swap Property |
|---|---|
| Shows or hides a layer | Replaces a nested instance |
| True / False | Selects from component instances |
| Good for optional elements | Good for interchangeable components |
| Example: Show icon | Example: Select icon type |
| Boolean Property | Text Property |
|---|---|
| Controls visibility | Controls text content |
| True / False | Text value |
| Example: Show badge | Example: Badge label |
A professional component can use multiple property types together.
Button
├── Boolean Property → Show icon
├── Boolean Property → Show label
├── Text Property → Label
└── Instance Swap → Icon
This creates a highly configurable component while keeping the interface understandable.
A notification component may have an optional message and editable title.
Notification
├── Title
└── Message
Properties:
Show message = True / False
Title = Text Property
A button can use a Boolean Property to control whether an icon appears and an Instance Swap Property to choose which icon is displayed.
Show icon = True / False
Icon = Save / Download / Share / Edit
A button can use Variants for interaction states and Boolean Properties for optional content.
Variants:
State = Default / Hover / Pressed / Disabled
Boolean:
Show icon = True / False
This separates component state from optional content.
Interactive Components and Boolean Properties solve different problems. A Boolean Property controls whether a layer is visible, while Interactive Components can define prototype behavior between component variants.
If two states need a prototype interaction between them, consider whether they should be represented as separate variants rather than being combined only through a Boolean Property.
Boolean Properties are not a replacement for two distinct prototype objects. If you need a prototype connection between two states, plan the component structure carefully before consolidating those states into a single component using visibility properties.
Optional content
→ Boolean Property
Interactive state
→ Variant / Interactive Component
A design system should expose only useful and intentional controls. Boolean Properties should be created for meaningful optional elements rather than every layer in a component.
For example, exposing Show icon can be useful. Exposing a Boolean Property for every decorative shape would usually create unnecessary complexity.
Although Boolean Properties are powerful, too many controls can make a component difficult to understand.
Too many controls:
Show shape 1
Show shape 2
Show shape 3
Show shape 4
Show line 1
Show line 2
Show decoration
Show shadow
...
Instead, identify the controls that users actually need.
Create a login button containing an optional icon and label.
Login Button
├── Login Icon
└── Login Label
Properties:
Show icon = True
Show label = True
Possible configurations:
A search field may contain a search icon and clear button.
Search Field
├── Search Icon
├── Input Text
└── Clear Button
Possible Boolean Properties:
Show search icon
Show clear button
Product Card
├── Product Image
├── Product Name
├── Price
├── Discount Badge
└── Add Button
Useful Boolean Properties:
Show discount badge
Show add button
Notification
├── Icon
├── Title
├── Message
└── Close Button
Properties:
Show icon
Show message
Show close button
Navigation Item
├── Icon
├── Label
└── Notification Badge
Boolean Properties:
Show icon
Show badge
This can support different navigation presentations without duplicating the entire component.
User List Item
├── Avatar
├── Name
├── Role
└── Status
Possible properties:
Show avatar
Show role
Show status
Product Item
├── Image
├── Product Name
├── Rating
├── Price
├── Discount
└── Wishlist Icon
Possible Boolean Properties:
Show rating
Show discount
Show wishlist
Design Component
↓
Identify Optional Layer
↓
Select Layer
↓
Create Boolean Property
↓
Give Clear Name
↓
Set Default Value
↓
Create Instance
↓
Test True / False
↓
Reuse Component
Before creating a Boolean Property, ask:
A well-designed component should make its configurable features obvious. Boolean Properties provide a centralized control area, helping users understand which parts of the component are intentionally customizable.
Boolean Properties can communicate component configuration more clearly to developers and other designers. A property such as Show badge provides a meaningful description of the intended component behavior.
Component documentation can explain how Boolean Properties should be used.
Component: Button
Show icon:
Use when an icon is required.
Show label:
Use when text is required.
Clear documentation helps teams use the component consistently.
When hiding optional content, consider whether the hidden content has an accessibility purpose. Do not hide meaningful information merely to simplify the visual design.
Boolean Properties can be useful when a component needs different levels of content at different screen sizes. For example, a compact layout may hide a secondary element while a larger layout can display it.
However, responsive behavior should be planned according to the actual product implementation rather than relying only on Figma visibility controls.
Mobile interfaces often have limited space, making optional content especially useful.
Desktop:
Icon + Label + Badge
Mobile:
Icon + Label
Compact:
Icon Only
Boolean Properties can help explore these configurations efficiently during design.
Desktop components often have more available space, so optional metadata, descriptions, badges, and secondary actions can be displayed when appropriate.
Cards are excellent candidates for Boolean Properties because different contexts may require different content.
Card
├── Image
├── Badge
├── Title
├── Description
└── CTA
Potential properties:
Show image
Show badge
Show description
Show CTA
Form components can use Boolean Properties for optional visual elements such as helper text, icons, or status indicators.
Input
├── Label
├── Input Field
├── Helper Text
└── Status Icon
Possible properties:
Show helper text
Show status icon
Table rows can have optional elements such as avatars, status indicators, or action controls.
Table Row
├── Avatar
├── Name
├── Status
└── Actions
Boolean Properties can control optional elements without requiring separate row components.
A modal may contain an optional close button, description, icon, or secondary action.
Modal
├── Icon
├── Title
├── Description
├── Primary Action
└── Secondary Action
Possible Boolean Properties:
Show icon
Show description
Show secondary action
Tooltip components may contain optional icons or supporting content. Boolean Properties can make those elements configurable.
An empty state can contain an illustration, title, description, and action.
Empty State
├── Illustration
├── Title
├── Description
└── Action
Possible properties:
Show illustration
Show description
Show action
Alert components can contain optional icons and close actions.
Alert
├── Icon
├── Message
└── Close Button
Properties:
Show icon
Show close button
Boolean Properties are component-level controls, while design tokens and variables can manage reusable design values such as colors, spacing, and typography. Use each system for the problem it is designed to solve.
Figma supports Boolean Properties alongside variables in component workflows. Where supported, a Boolean Property can work with a Boolean variable, allowing visibility configuration to participate in a variable-based system.
Boolean Variable:
showIcon = true
Component Property:
Show icon
Layer Visibility:
Visible
Always test the actual configuration in the current Figma file because variable and component-property workflows can evolve.
When components are used as part of a shared design system or library, meaningful Boolean Properties make reusable assets easier to configure. Library publishing and availability can depend on the Figma plan and workspace setup.
Keep component properties organized and easy to understand.
Properties
Show icon
Show label
Show badge
Icon
Label
Use consistent naming conventions throughout the design system.
A consistent naming convention improves usability.
| Purpose | Recommended Example |
|---|---|
| Optional icon | Show icon |
| Optional label | Show label |
| Optional badge | Show badge |
| Optional avatar | Show avatar |
| Optional action | Show action |
| Optional leading element | Has leading |
| Optional trailing element | Has trailing |
Do not use a Boolean Property as a substitute for meaningful interaction states when the design requires different component behavior.
Incorrect:
Is Hovered = True / False
Better:
Variant State = Default / Hover / Pressed
Use Variants and Interactive Components when the design needs distinct states and prototype behavior.
Adding a Boolean Property to every layer can make a component difficult to use. Expose only meaningful configuration options.
Names such as Option A or Toggle 1 do not communicate what the control does. Use action-oriented names such as Show icon or Show badge.
When a layer is hidden, the surrounding layout may change. Always test the component with both True and False values to make sure spacing and alignment remain correct.
Before replacing distinct states with visibility controls, check whether those states need separate prototype connections or interactions.
If the requirement is to choose between different nested components, an Instance Swap Property may be more appropriate than a Boolean Property.
Show Icon
→ Boolean Property
Choose Icon
→ Instance Swap Property
1. Identify reusable component
↓
2. Identify optional content
↓
3. Decide Boolean vs Variant
↓
4. Select nested layer
↓
5. Create Boolean Property
↓
6. Give meaningful name
↓
7. Select default value
↓
8. Create instance
↓
9. Test True
↓
10. Test False
↓
11. Check Auto Layout
↓
12. Check prototype requirements
↓
13. Document if necessary
↓
14. Add to design system
Create a reusable button that supports icon and label configurations.
Button
├── Icon
└── Label
Show icon
Show label
True + True
→ Icon + Label
True + False
→ Icon Only
False + True
→ Label Only
Create a product card with optional discount badge and wishlist icon.
Product Card
├── Image
├── Product Name
├── Price
├── Discount Badge
└── Wishlist
Properties:
Show discount
Show wishlist
Create a navigation item that can display an icon and notification badge.
Navigation Item
├── Icon
├── Label
└── Badge
Properties:
Show icon
Show badge
User Card
├── Avatar
├── Name
├── Role
├── Status
└── Action
Properties:
Show avatar
Show role
Show status
Show action
Every Boolean Property should be tested in both states.
| Test | Expected Result |
|---|---|
| Boolean = True | Layer is visible |
| Boolean = False | Layer is hidden |
| Switch True → False | Layer disappears correctly |
| Switch False → True | Layer appears correctly |
| Multiple properties | All combinations behave correctly |
| Auto Layout | Spacing and alignment remain correct |
A Boolean Property is a component property that uses True or False values to control layer visibility within component instances.
It has two values: True and False.
True makes the connected layer visible.
False hides the connected layer.
They are mainly used to make optional layers configurable in reusable components.
No. Boolean Properties are best for optional visibility, while Variants are better for distinct component states, sizes, types, and other meaningful variations.
Show icon = True/False is a common example.
Boolean controls visibility, while Instance Swap allows a nested component instance to be replaced with another suitable instance.
They appear in the component Properties section in the right sidebar.
They allow reusable components to support optional content without creating unnecessary duplicate components.
Boolean Property
↓
True / False
↓
Layer Visibility
↓
True = Visible
False = Hidden
↓
Reusable Component
↓
Flexible Design System
| Question | Answer |
|---|---|
| What? | True/False component property |
| Controls? | Layer visibility |
| True? | Layer visible |
| False? | Layer hidden |
| Best for? | Optional elements |
| Example? | Show icon |
| Alternative for states? | Variants |
| Alternative for swapping? | Instance Swap |
Consider a reusable button used across a design system.
Button
├── Icon
└── Label
Component Properties:
Show icon = True
Show label = True
Instance A:
Show icon = True
Show label = True
→ Icon + Label
Instance B:
Show icon = True
Show label = False
→ Icon Only
Instance C:
Show icon = False
Show label = True
→ Label Only
This approach allows one flexible component to support several useful configurations while keeping the component library easier to manage.
Boolean Properties are an important part of creating flexible and reusable components in Figma. They provide simple True/False controls for layer visibility and are particularly useful for optional icons, labels, badges, avatars, descriptions, actions, and other component elements.
The best approach is to use Boolean Properties when an element simply needs to be shown or hidden, use Instance Swap when users need to choose between nested components, and use Variants or Interactive Components when the design requires distinct states or prototype behavior.
When used with clear naming, sensible defaults, Auto Layout, component properties, and a well-organized design system, Boolean Properties can significantly improve component flexibility and reduce unnecessary duplication.
